<template>
    <el-container style="height: 100%">
        <!--    头部 导航条-->
        <el-header style="background-color: white">
            <Navagation :user="user"
                        :role="role"
                        :login-status="loginStatus"
            >
        </Navagation>
<!--   显示由 Vue Router 管理的不同页面。         -->
            <el-main>
                <router-view />
            </el-main>
        </el-header>
    </el-container>
</template>
<!--前台布局基础 获取和存储用户信息，然后将这些信息传递给 Navagation 组件-->
<!--置了整个应用的基本样式和布局。-->
<script>
    import Navagation from "@/components/Navagation";
    import request from "@/utils/request";
    export default {
        name: "Front",
        data(){
            return{
                user:{},
                role:'user',
                loginStatus:false,
            }
        },
        methods:{
         //   在组件创建或在其他声明钩子中调用
         //   以确保 user 数据属性总是包含最新的用户信息
         // getUser(){
         //     //从 localStorage 获取用户名：提取
         //     let username = localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")).username : ""
         //     if (username) {
         //         // 从后台获取User数据
         //         this.request.get("/userinfo/" + username).then(res => {
         //             // 重新赋值后台的最新User数据
         //             this.user = res.data
         //             console.log(this.user.role)
         //         })
         //     }
         // },
        },
        components:{
            Navagation ,
        },
        created() {
            if(localStorage.getItem("user")){
                request.post("http://localhost:8888/role").then(res=> {
                    if (res.code === '200') {
                        this.role = res.data;
                        if (localStorage.getItem("user")) {
                            this.user = JSON.parse(localStorage.getItem("user"));
                            this.loginStatus = true;
                        }
                    } else {
                        this.user = {nickname: '您未登录', avatarUrl: null};
                        localStorage.removeItem('user')
                        this.loginStatus = false;
                    }
                })
            }else{
                this.user = {nickname: '您未登录', avatarUrl: null};
                this.loginStatus = false;
            }
            }

    }
</script>

<style scoped>
    /* @import "../../resource/css/search.css"; */
    .image {
        width: 100%;
        display: block;
    }



    .search{
    padding: 10px 0;
    width: 650px;
}
.search div{
    position: relative;
    width: 650px;
}
.search input {
    outline: none;
    height: 50px;
    padding-left: 26px;
    padding-top: 2px;
    width: 650px;
    border-radius: 90px;
    border: 2px solid #142772;
    background: #f5f5f5;
    font-size: 16px;
}
.search input:focus{
    background: #ddfafa;

}

.search button {
    /* background: url(../../assets/images/搜索.png); */
    border: none;
    outline: none;
    height: 32px;
    width: 32px;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: -10px;
}
</style>